<template>
  <div class="container" v-if='isShow'>
    <Tips v-if="listInfo.length"
      :isTool="false" :title="'访客'" :increase="todayCount" :reduce="yesterdayCount" />
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="finished && !listInfo.length ? '' : '没有更多了'"
      @load="onLoad"
    >
      <div v-for="(item, index) in listInfo" :key="index">
        <div class="thread-item">
          <div class="thread-body van-hairline--bottom" @click="jumpDetail(item)" >
            <div class="left">
              <Avatar size="normal" :avatar="item.avatarUrl"></Avatar>
              <div class="content">
                <h3 class="name ellipsis">
                  <span class="name-show ellipsis">{{ item.clientRemarkName || item.clientName }}</span>
                  <span class="aw-tag">
                    <span v-if="item.clientMobile">留电</span>
                    <span class="active" v-if="item.ifToday">今日新增</span>
                  </span>
                  <!-- <van-tag
                    color="#E3E6EA"
                    text-color="#40516F"
                    v-if="item.clientMobile"
                  >留电</van-tag>
                  <van-tag
                    color="#FCE7E0"
                    text-color="#EB602F"
                    v-if="item.ifToday"
                  >今日新增</van-tag> -->
                </h3>
                <p>{{ sourceType[item.sourceType] || "来自系统分配" }} | {{ item.lastTimeStr }}</p>
                <!-- <p>{{ sourceType[item.sourceType] || "来自系统分配" }} | {{item.updateTime | dateFormatterToHuman(new Date().getTime() )}}</p> -->
              </div>
            </div>
            <div class="right">
              <p class="num">{{ item.browsCount }}</p>
              <p class="text">访问次数</p>
            </div>
          </div>
          <ul class="footer">
            <li class="btn-item van-hairline--right" @click="contact(item)">
              <span class="iconfont icon-kehu_xiaoxi"></span>
              <span class="text">发送消息</span>
            </li>
            <li class="btn-item" :class="{ blue : !item.clientStrangerFlag }" @click="setCustomer(item)">
              <span class="iconfont" :class="{ 'icon-zhiweikehu' : !item.clientStrangerFlag, 'icon-yizhiweikehu' : item.clientStrangerFlag }" ></span>
              <span class="text">{{ !item.clientStrangerFlag ? '置为意向客户' : '已置为意向客户' }}</span>
            </li>
          </ul>
        </div>
        <NewestDivider :isBgColor="true" v-if="findIndex == index" title="新增访客" />
      </div>
    </van-list>
    <div class="no-data" v-if="!listInfo.length && finished">
      <img src="@/assets/img/dynamics/dynamicsNull.png" alt="" >
      <p>暂无访客，快去分享吧~ </p>
    </div>
  </div>
</template>
<script>
import dynamicsService from 'SERVICE/dynamicsService'
import CustomService from 'SERVICE/customService'
import Avatar from '@/components/Avatar'
import Tips from '@/components/Dynamics/Tips'
import NewestDivider from '@/components/Dynamics/NewestDivider'

export default {
  components: {
    Tips,
    Avatar,
    NewestDivider
  },
  data () {
    return {
      title: "访客总数",
      listInfo: [],
      clientIdList: [], //去重
      isShow: true,
      current: 1,
      size: 10,
      findIndex: 0,
      loading: false,
      finished: false,
      scrollTop: 0,
      total: 0,
      todayCount: 0,
      yesterdayCount: 0,
      sourceType: {
        1: '来自名片分享',
        2: '来自楼盘分享',
        3: '来自文章分享',
      }
    }
  },
  created () {
    let { total, todayCount, yesterdayCount } = this.$route.query
    this.todayCount = +todayCount || 0
    this.yesterdayCount = +yesterdayCount || 0
    let str = total ? `(${total})` : ""
    document.title = this.title + str
    this.getPosition()
  },
  mounted() {
    this.$nextTick(() => {   
      this.$el.scrollTop = this.scrollTop
    })
  },
  methods: {
    /**
     * 上拉加载
     */
    async onLoad () {
      try {
        let obj = { current: this.current, size: this.size, type: 0, ifHome: 1 }
        const result = await CustomService.getCustomerList(obj)
        this.listInfo = this.listInfo.concat(result.records)
        this.findIndex = this.listInfo.findIndex(item => !item.ifToday) - 1
        if (result.pages <= this.current) {
          this.finished = true
        } else {
          this.current +=1
        }
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    // async getTipsCount () {
    //   try {
    //     let obj = await CustomService.getCustomerListTypeCountVO()
    //     let { todayCount, yesterdayCount }  = obj
    //     this.todayCount = +todayCount || 0
    //     this.yesterdayCount = +yesterdayCount || 0
    //     // this.setTitle()
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },
    /**
     * 获取保存位置
     */
    getPosition () {
      try {
        let data = sessionStorage.getItem('listInfo')
        if (data) {
          let obj = JSON.parse(data)
          for (const key in obj) {
            this[key] = obj[key]
          }
          sessionStorage.removeItem('listInfo')
        } 
        // else {
        //   this.getTipsCount()
        // }
      } catch (error) {
        console.log(error)
      }
    },
     /**
     * 跳转到客户详情
     */
    jumpDetail (item) {
      this.scrollTop = this.$el.scrollTop
      sessionStorage.setItem('listInfo', JSON.stringify(this.$data))
      let query = {}
      if (item.clientStrangerFlag !== 2) {
        query = { thread: 'thread' }
      }
      this.$router.push({ path: `/custom/${item.clientId}`, query })
    },

    /**
     * 置为客户
     */
    setCustomer (item) {
      if (item.clientStrangerFlag) return false
      this.$dialog.confirm({
        title: '确定将该访客置为意向客户？',
        messageAlign: 'left',
        confirmButtonText: '确定',
        confirmButtonColor: "#EA4D2E",
        cancelButtonText: '取消',
        cancelButtonColor: "#007AE6"
      }).then(() => {
        this.setIntentionCustomer(item)
      }).catch((error) => { console.log(error) })
    },

    /**
     * 置为意向客户
     */
    async setIntentionCustomer(item){
      try {
        CustomService.updateCustomerInfo({ clientId: item.clientId, clientStrangerFlag: 2 })
        item.clientStrangerFlag = 2
        this.$toast(`已将访客“${item.clientName}”置为意向客户，可在意向客户列表查看`)
      } catch (e) {
        console.log(e)
      }
    },

    /**
     * 联系
     */
    contact (item) {
      this.scrollTop = this.$el.scrollTop
      sessionStorage.setItem('listInfo', JSON.stringify(this.$data))
      this.$router.push({
        name: "message",
        query: {
          clientId: item.clientId
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

.container {
  background: #f7f9fa;
}

.no-data {
  width: 100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  height: 17px;
  line-height: 17px;
  img {
    width: 88px;
    height: 88px;
  }
}

.thread-item {
  background: #fff;
  height: 132px;
  box-sizing: border-box;
  font-size: 12px;
  // font-family: PingFangSC;
  font-weight: 500;
  margin-top: 12px;
  .thread-body {
    color: rgba(156, 165, 181, 1);
    padding: 20px 16px;
    display: flex;
    justify-content: space-between;
    box-shadow: inset 0px -1px 1px -1px #E4E6F0;
    .left {
      display: flex;
      align-items: center;
      flex: 1;
      .content {
        padding-left: 12px;
        .name {
          font-size: 16px;
          font-family: PingFangSC-Semibold;
          color: #13284D;
          height: 24px;
          line-height: 24px;
          max-width: 230px;
          .name-show {
            max-width: 128px;
            margin-right: 4px;
            font-weight: 500;
            display: inline-block;
            vertical-align: middle;
          }
          .van-tag {
            transform: scale(0.8);
            opacity: 0.8;
            vertical-align: middle;
          }
        }
        p {
          height: 16px;
          line-height: 16px;
          margin-top: 4px;
        }
      }
    }
    .right {
      text-align: center;
      flex-basis: 50px;
      .num {
        margin-top: 6px;
        font-size: 20px;
        font-family: DINCondensed-Bold;
        font-weight: 500;
        color: #13284D;
      }
      .text {
        font-size: 10px;
        color: #9BA4B4;
        margin-top: 2px;
      }
    }
  }
  .footer {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-item {
      flex: 1;
      align-items: center;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #9BA4B4;
      &:first-child {
        color: #405170;
      }
      &.blue {
        color: #007AE6;
      }
      .text {
        font-size: 14px;
        vertical-align: top;
        margin-left: 5px;
      }
      // .icon-befoce {
      //   vertical-align: text-top;
      //   margin-right: 5px;
      //   display: inline-block;
      //   width: 16px;
      //   height: 16px;
      //   background-size: cover;
      //   background-repeat: no-repeat;
      //   background-position: center;
      // }
    }
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
  }
  .aw-tag {
    font-size: 10PX;
    line-height: normal;
    display: inline-table;
    vertical-align: middle;
    border-collapse:separate;
    border-spacing: 5px;
    font-family: 'Microsoft YaHei', 'PingFangSC-Regular';
    span {
      display: table-cell;
      vertical-align: middle;
      padding: 0 4px;
      border-radius: 2px;
      background: rgba(156, 165, 181, 0.15);
      color: #40516f;
      &.active {
        color: #EB602F;
        background: #FCE7E0;
      }
    }
  }
}
.van-dialog__header {
  color: #333;
  font-family: PingFangSC;
  font-weight: 500;
}
.van-dialog__message{
  font-family: PingFangSC;
  font-weight: 400;
  color: #333;
}
.van-dialog__cancel span {
  color: #007ae6;
}
.van-dialog__confirm span {
  color: #ea4d2e;
}

</style>
